<template>
	<div class="main">
		<div v-for="(item, index) in baseInfo.Configs" :key="index">
			<div v-if="item.Type">
				<van-field name="area" v-if="item.Type == 'Text' || item.Type == 'Number'" v-model="item.Value"
					:label="item.Display">
					<template #extra>
						{{ item.Unit }}
					</template>
				</van-field>
				<van-field class="input_text" v-if="item.Type == 'Choose'" v-model="trade" :label="item.Display" readonly
					autosize type="textarea" />

				<!-- 图片 -->
				<van-field v-if="item.Type == 'SingleImage'" class="input_text" name="uploader" :label="item.Display">
					<template #input>
						<van-uploader deletable delete="deleteImage" v-model="uploader[item.FieldName]" :name="item.FieldName" :max-count="1" :after-read="afterRead"/>
					</template>
				</van-field>
				<!-- 单选框 -->

				<van-field class="input_text" name="radio" :label="item.Display" v-if="item.Type == 'Radio'">
					<template #input>
						<div class="van-radio-group-horizontal2">
							<van-radio-group v-model="item.Value" direction="horizontal">
								<van-radio v-for="(item1, index1) in item.ParamList" :key="index1" :name="item1.ID"
									style="margin: 0 10px 10px 0">{{ item1.Name }}</van-radio>
							</van-radio-group>
							<van-field v-if="item.ShowRelatedFieldKey && item.Value == item.ShowRelatedFieldKey"
								:name="item.ShowRelatedFieldKey" :placeholder="item.RelatedPlaceholder" :value="item.RelatedFieldValue"></van-field>
						</div>
					</template>
				</van-field>

				<!-- 多选 -->
				<van-field class="input_text" name="radio" :label="item.Display" v-if="item.Type == 'Checkbox'">
					<template #input>
						<van-checkbox-group v-model="item.Value" direction="horizontal">
							<van-checkbox shape="square" v-for="(item1, index1) in item.ParamList" :key="index1"
								:name="item1.ID" style="margin: 0 10px 10px 0">{{ item1.Name }}</van-checkbox>
						</van-checkbox-group>
					</template>
				</van-field>
				<!-- 日期 Date-->
				<van-field class="input_text" v-if="item.Type == 'Date'" readonly clickable name="calendar"
					:value="item.Value" :label="item.Display" placeholder="点击选择日期" @click="openCalendar(index)">
					<template #right-icon>
						<van-icon name="arrow" />
					</template>
				</van-field>
				<van-calendar color="#1989fa" v-model="showCalendar" @confirm="onConfirm" />
			</div>
		</div>

		<div class="btn_submit">
			<van-button block type="info" @click="save"> 保存 </van-button>
		</div>
	</div>
</template>

<script>
import {updateModifyPostNew_RiskManagerInfo } from '@/api/base'
import { uploadAttach } from "@/api/common";
import { mapGetters } from 'vuex'
import { formatDate, getDate } from '@/utils/getDate'
export default {
	components: {},
	data() {
		return {
			baseInfo: this.$route.params,
			uploader: {test:[{url:"https://img.yzcdn.cn/vant/leaf.jpg"}]},
			
			// uploader2: [{ url: 'https://img.yzcdn.cn/vant/leaf.jpg' }],
			// uploader3:{a:[{ url: 'https://img.yzcdn.cn/vant/leaf.jpg' }]} ,
			
			showCalendar: false,
			idx: '',
		}
	},
	computed: {
		...mapGetters(['baseUrl','CompanyCode']),
	},
	created() {
		this.$set(this.uploader, 'test2', [{url:"https://img.yzcdn.cn/vant/leaf.jpg"}] )
		this.baseInfo.Configs.forEach(element => {
			if(element.Type=="SingleImage"){
				this.$set(this.uploader, element.FieldName, [{url:this.baseUrl+element.Value,AttFilePath:element.Value}] )
				
			}
		});
		console.log(this.uploader)
		
	},
	methods: {
		deleteImage(value){
			console.log(value)
		},
		// 打开日历
		openCalendar(idx) {
			this.idx = idx
			this.showCalendar = true
		},
		onConfirm(date) {
	
			this.baseInfo.Configs.forEach((item, index) => {
				if (this.idx == index) {
					const dateTime = formatDate(date)
					item.Value = getDate(dateTime)
				}
			})
			// this.value = `${date.getMonth() + 1}-${date.getDate()}`
			this.showCalendar = false
		},
		save() {
			this.loading = true
			let param = {}
			param.CompanyCode=this.CompanyCode
			this.baseInfo.Configs.forEach((item) => {
				if (item.Type == "SingleImage") {
					// item.Value=this.uploader[item.FieldName]?this.uploader[item.FieldName]:item.Value

					item.Value=this.uploader[item.FieldName].map(element=>element.AttFilePath).join(';')
					param[item.FieldName] = item.Value
				}else if (item.Type == 'Checkbox' && item.Value) {
					param[item.FieldName] = item.Value.join(',')
				}else{
					param[item.FieldName] = item.Value
				}
			})
			updateModifyPostNew_RiskManagerInfo(param)
				.then((res) => {
					console.log(res, 'res')
					this.loading = false
					this.$router.go(-1)
				})
				.catch((err) => {
					console.log('err', err)
				})
		},
		afterRead(file,name) {
			console.log(name)
			let params = new FormData(); //创建form对象
			params.append("file", file.file);
			uploadAttach(params)
				.then((res) => {
					this.uploader[name.name][name.index].AttFilePath=res.data.AttFilePath
				})
				.catch((err) => {
					console.log("err", err);
				});
		},
	},
}
</script>

<style lang="less">
.imgs {
	width: 60px;
	height: 60px;
}

.van-radio-group-horizontal2 {
	width: 100%
}
</style>
